<template>
  <div class="container">
    <div class="title bd-bottom flex-row flex-y-center">
      <div class="haoyou flex-x-center">好友</div>
      <div class="flex-grow-1 flex-x-center">排名</div>
      <div class="dianzan flex-x-center">点赞</div>
    </div>
    <div v-for="item,index in list" :key="index" class="flex-row flex-y-center top bd-bottom">
    	<div class="haoyou flex-y-center">
    		<img src="@/assets/images/icon/top1.png" >张三
    	</div>
    	<div class="flex-grow-1 flex-x-center" v-if="index==0">
    		<img src="@/assets/images/icon/top1.png" class="toppic">
    	</div>
    	<div class="flex-grow-1 flex-x-center" v-if="index==1">
    		<img src="@/assets/images/icon/top2.png" class="toppic">
    	</div>
    	<div class="flex-grow-1 flex-x-center" v-if="index==2">
    		<img src="@/assets/images/icon/top3.png" class="toppic">
    	</div>
	    <div class="flex-grow-1 flex-x-center" v-if="index>=3">排名</div>
	    <div class="dianzan flex-x-center">点赞</div>
    </div>
  </div>
</template>
<script>
	export default({
		data(){
			return{
				list:[1,2,3,4,5,6,7,8]
			}
		}
	})
</script>
<style scoped>
.container {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: croll;
  padding: 1rem;
  background-color: #fff;
}
 .title {
    height: 2rem;
    font-size: .8rem;
  }
  .haoyou,.dianzan{
  	width: 4rem;
  }
  .top{
     padding: .5rem 0;
  }
   .haoyou img{
     	height: 1.5rem;
     	height: 1.5rem;
     	margin-right: .5rem;
     }
.toppic{
	height: 1.2rem;
	width: 1.2rem;
}
</style>
